<template>
    <div>
        <div class="content">
            <navigation 
                :title="'给极点建议'" 
                :color="'#fff'" 
                :right_txt="'提交'"
                :right_show="true"
                @rightBtn="submit"
            ></navigation>
            <div class="detail">
                <div class="title">
                    类型：
                    <RadioGroup v-model="type">
                        <Radio :label="0">建议</Radio>
                        <Radio :label="1">投诉</Radio>
                    </RadioGroup>
                </div>
                <div class="desc">
                    <div class="name">
                        留言内容
                    </div>
                    <div class="textarea">
                        <textarea placeholder="请输入投诉/建议内容" v-model="value"></textarea>
                        <span>
                            {{ value.length }} / 200
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import navigation from '@/components/nav-head';

    import {
        advise
    } from '@/api'
    export default {
        components:{
            navigation
        },
        watch:{
            // 监听 建议内容的变化 
            value(nVal){
                // 不能超过200字
                this.value = nVal.substr(0,200)
            }
        },
        data(){
            return {
                // value 绑定建议的内容
                value: '',
                // 1 是投诉 0是建议
                type: 0
            }
        },
        methods: {
            // 提交的方法
            submit(){
                // 判断最少十位数
                if(this.value.length < 10){
                    this.$Message.error('最少填写十位数哦~')
                    return
                }
                // 提交投诉建议请求
                advise({
                    type: this.type,
                    value: this.value
                }).then(res => {
                    if(res.data.code == 1){
                        this.$Message.success('提交成功');
                        setTimeout(() => {
                            this.$router.back();
                        }, 1200);
                    }else{
                        this.$Message.error(res.data.msg)
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .content{
        height: 100vh;
        padding-top: 44px;
        color: #fff;
        background-image: linear-gradient(to bottom,rgb(50,134,255),rgb(130, 13, 169));
        .detail{
            width: 100%;
            padding: 0 3%;
            .title{
                width: 100%;
                height: 44px;
                line-height: 44px;
                border-bottom: 1px solid #fff;
            }
            .desc{
                .name{
                    height: 40px;
                    line-height: 40px;
                    font-size: 13px;
                    font-weight: bold;
                }
                .textarea{
                    width: 100%;
                    position: relative;
                    span{
                        position: absolute;
                        right: 6%;
                        bottom: 5px;
                    }
                    textarea{
                        border: 1px solid #fff;
                        padding: 5px;
                        height: 150px;
                        border-radius: 7px;
                        width: 90%;
                        margin-left: 5%;
                        background-color: rgba(0,0,0,0);    
                        outline: 0;
                        color: #fff;
                        &::-webkit-input-placeholder{
                            color: #eee;
                        }
                    }
                }
            }
        }
    }
</style>